<template>
  <section>
    
    <router-link to="/xinzeng">xinzeng </router-link>

    <!-- <input type="text" placeholder="请输入任务名称" v-model="inputText"> <span @click="add">新增</span><br> -->
    <main>
      <button>全部任务 <span>{{ store.shuju.length }}</span></button>
      <button>已完成 {{ store.shuju.length-store.weiwancheng}}</button>
      <button>未完成 {{ store.weiwancheng}}</button>
    </main>
    <div class="renwu">
      <h3>任务列表</h3>
      <div :class="`liebiao ${item.zhuangtai ? 'change' : ''}`" v-for="(item, index) in store.shuju" :key="index">
        <input type="checkbox" @click="change(item.id)">
        <div>{{ item.id }}</div>
        <div>{{ item.name }}</div>
        <span @click="shanchu(item.id)">删除</span>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue';
import { userenwuStore } from '../stores/renwu'

import { useRoute } from 'vue-router'
var $route = useRoute();


var inputText = ref('')

var store = userenwuStore()


var change = (id) => {
  store.genggai(id)
}
var shanchu = (id) => {
  store.del(id)
}

</script>
<style scoped>
button {
  margin-top: 10px;
}

section .renwu {
  margin-top: 20px;
}

section .renwu .liebiao {
  display: flex;
  justify-content: space-between;
  background-color: red;
}

section .renwu .change {
  background-color: aqua;
}
</style>
